<template>
	<view>
		<view class="blank30"></view>
		<view class="wrapper">
			<u--form :labelStyle="formLabelStyle" labelPosition="top" :model="form" :rules="rules" ref="uForm"
				labelWidth="300">
				<u-form-item label="Preferred Work Location" prop="desiredCity">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.desiredCity"
						border="none" fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Desired Job Position" prop="desiredIndustry">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.desiredIndustry"
						border="none" fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Monthly Salary Exception" prop="maxSalary">
					<view class="flex" style="width: 100%;">
						<view class="flex-1">
							<u--input :customStyle="inputCustomStyle" placeholder="min salary" v-model="form.minSalary"
								border="none" fontSize="12px"></u--input>
						</view>
						<view class="ml15 mr15">
							-
						</view>
						<view class="flex-1">
							<u--input :customStyle="inputCustomStyle" placeholder="max salary" v-model="form.maxSalary"
								border="none" fontSize="12px"></u--input>
						</view>
					</view>
				</u-form-item>
				<view class="" v-for="(item,i) in cardList">
					<view class="blank20"></view>
					<view class="box">
						<u-form-item label="working city">
							<u--input :customStyle="inputCustomStyle2" placeholder="please enter"
								v-model="cardList[i].desiredCity" border="none" fontSize="12px"></u--input>
						</u-form-item>
						<u-form-item label="Expect industry">
							<u--input :customStyle="inputCustomStyle2" placeholder="please enter"
								v-model="cardList[i].desiredIndustry" border="none" fontSize="12px"></u--input>
						</u-form-item>
						<u-form-item label="Expected Salary">
							<view class="flex" style="width: 100%;">
								<view class="flex-1">
									<u--input :customStyle="inputCustomStyle2" placeholder="min salary"
										v-model="cardList[i].minSalary" border="none" fontSize="12px"></u--input>
								</view>
								<view class="ml15 mr15">
									-
								</view>
								<view class="flex-1">
									<u--input :customStyle="inputCustomStyle2" placeholder="max salary"
										v-model="cardList[i].maxSalary" border="none" fontSize="12px"></u--input>
								</view>
							</view>
						</u-form-item>

						<u-form-item label="Job type">
							<view style="position: relative;width: 100%;" @click="openPicker(i)">
								<u--input :value="workTypeSidName[i]" fontSize="12px" :customStyle="inputCustomStyle2"
									placeholder="please choose" border="none" disabled>
									<view slot="suffix">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</u--input>
							</view>
						</u-form-item>
						<view class="" v-if="i == cardList.length-1">
							<view class="blank30"></view>
							<view class="add-btn flex align-center justify-center" @click="addCard">
								<u-icon name="plus-circle" color="#FF9228"></u-icon>
								<view class="ml15">
									Add position
								</view>
							</view>
							<view class="blank30"></view>
						</view>
						<view class="" v-else>
							<view class="blank30"></view>
							<view class="add-btn flex align-center justify-center" @click="removeCard(i)">
								<u-icon name="trash" color="#FC4646"></u-icon>
								<view class="ml15 text-red">
									remove
								</view>
							</view>
							<view class="blank30"></view>
						</view>
					</view>
				</view>
			</u--form>
		</view>
		<view class="blank30"></view>
		<fixed-bottom-btn @submit="submit"></fixed-bottom-btn>
		<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" @confirm="onConfirmPicker"
			@close="onClosePicker" @cancel="onCancelPicker" keyName="label" cancelText="Cancel"
			confirmText="Confirm"></u-picker>

	</view>
</template>

<script>
	import fixedBottomBtn from '@/components/fixed-bottom-btn.vue';
	import {
		dicts_by_key,
		expectations,
		expectations_sid,
		expectations_sid_delete,
		expectations_sid_edit
	} from '@/common/api.js';

	export default {
		components: {
			fixedBottomBtn
		},
		data() {
			return {
				id: '',
				form: {
					desiredCity: "",
					desiredIndustry: "",
					maxSalary: "",
					minSalary: "",
					note: "",
					status: 0
				},
				inputCustomStyle2: {
					backgroundColor: '#F5F6F7',
					padding: '16upx',
					borderRadius: '16upx',
					fontSize: '24upx',
				},
				rules: {
					desiredCity: [{
						required: true,
						message: 'Preferred Work Location required',
						trigger: ['blur', 'change']
					}],
					desiredIndustry: [{
						required: true,
						message: 'Desired Job Position required',
						trigger: ['blur', 'change']
					}],
					maxSalary: [{
						required: true,
						message: 'Monthly Salary Exception required',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return !isNaN(value)
						},
						message: 'Error number',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							let minSalary = this.form.minSalary;
							return !isNaN(minSalary)
						},
						message: 'Error number',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							let minSalary = Number(this.form.minSalary);
							let maxSalary = Number(value);
							return maxSalary>minSalary
						},
						message: 'Error number',
						trigger: ['blur', 'change']
					},
					]
				},
				pickerShow: false,
				pickerColumns: [],
				cardList: [{
					"desiredCity": "",
					"desiredIndustry": "",
					"maxSalary": '',
					"minSalary": '',
					"note": "",
					"status": 0,
					"workTypeSid": ""
				}],
				pickerColumns: [],
				pickerKey: '',
				workTypeSidPicker: [],
				workTypeSidObj: {}
			}
		},
		computed: {
			workTypeSidName() {
				let arr = this.cardList.map(v => {
					if (v.workTypeSid) {
						try {
							return this.workTypeSidObj[v.workTypeSid].label
						} catch (e) {
							return ''
						}
					}
					return v.workTypeSid
				});
				return arr;
			}
		},
		methods: {
			addCard() {
				this.cardList.push({
					"desiredCity": "",
					"desiredIndustry": "",
					"maxSalary": '',
					"minSalary": '',
					"note": "",
					"status": 0,
					"workTypeSid": ""
				})
			},
			removeCard(i) {
				this.cardList = this.cardList.filter((v, k) => k != i);
			},
			onClosePicker(e) {
				this.pickerShow = false;
			},
			onCancelPicker() {
				this.pickerShow = false;
			},
			onConfirmPicker(e) {
				this.pickerShow = false;
				this.cardList[this.pickerKey].workTypeSid = e.value[0].value;
			},
			openPicker(key) {
				let pickerColumns = this.workTypeSidPicker;
				this.pickerKey = key;
				this.pickerColumns = [pickerColumns];
				this.pickerShow = true;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let data = JSON.parse(JSON.stringify(this.form));
					data.cardList = JSON.parse(JSON.stringify(this.cardList));
					uni.showLoading({
						title: 'loading'
					});
					if (this.id) {
						expectations_sid_edit(this.id, data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					} else {
						data.candidateSid = this.sid;
						expectations(data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					}
				}).catch(errors => {
					try {
						uni.$u.toast(errors[0].message)
					} catch (e) {
						uni.$u.toast('please enter')
					}
				})
			},
			getData() {
				if (!this.id) {
					return false;
				}
				uni.showLoading({
					title: 'loading'
				});
				expectations_sid(this.id).then(async (res) => {
					let data = res.data;
					for (let key in this.form) {
						this.form[key] = data[key]
					};
					this.cardList = data.cardList.map(v => {
						return {
							"desiredCity": v.desiredCity,
							"desiredIndustry": v.desiredIndustry,
							"maxSalary": v.maxSalary,
							"minSalary": v.minSalary,
							"note": v.note,
							"status": 0,
							"workTypeSid": v.workTypeSid
						}
					});
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			init() {
				dicts_by_key('workType').then(async (res) => {
					let {
						data
					} = res;
					let workTypeSidPicker = data.map(v => {
						return {
							label: v.memberName,
							value: v.sid
						}
					});
					this.workTypeSidPicker = workTypeSidPicker;
					this.workTypeSidObj = this.toObj(workTypeSidPicker, 'value');
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			uni.$off('refresh_career');
			uni.$once('refresh_career', (v) => {
				this.getData();
			})
		},
		onLoad(d) {
			this.id = d.id || '';
			this.init();
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.box {
		padding: 20upx 40upx;
	}

	.add-btn {
		height: 82upx;
		border-radius: 20upx;
		background: #FFFFFF;
		box-shadow: 0px 4upx 20upx 0px rgba(153, 171, 198, 0.28);
		color: #FF9228;

	}
</style>